<template>
	<view class="head">
		<u-sticky>
			<view style="padding: 10rpx 0rpx 10rpx 0rpx;background-color: white;">
				<u-search :showAction="true" actionText="搜索" :animation="true" borderColor="rgb(241, 241, 241)"
					placeholder='请输入订单编号' @custom="search" v-model="orderNum" @search="search"></u-search>
			</view>
			<view style="background-color: white;border-bottom: 0px dotted white;">
				<u-tabs @click="tabsClick" :list="titleList" lineWidth="30" :lineColor="`url(${lineBg}) 100% 100%`"
					:activeStyle="{
					            color: '#3b3b41',
					            fontWeight: 'bold',
					            transform: 'scale(1.05)'
					        }" :inactiveStyle="{
					            color: '#606266',
					            transform: 'scale(1)'
					        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></u-tabs>
			</view>
		</u-sticky>
		<view>
			<up-list class="myList" @scrolltolower="scrolltolower">
				<up-list-item v-for="(item,index) in dataList" :key="index">
					<view class="order">
						<span class="badge">{{getStatus(item.status)}}</span>
						<view class="order-number">
							<view class="number-left">
								<image src="/static/supplyChain/number.png" mode="widthFix"></image>
								<text>{{item.orderIndexStr == null?  item.orderSum :item.orderSum+ item.orderIndexStr}}</text>
							</view>
							<view class="number-right"
								:class="item.status == 3 ? 'green':item.status == 2?'blue':'red'">
							</view>
						</view>
						<view class="order-item" v-if="this.status!=1">
							<up-icon name="home-fill" color="#ff0000" size="22"></up-icon>
							<text style="font-size: 35rpx;font-weight: bold; color: #000000;" class="row1">{{ (item.parkName.split("_"))[item.parkName.split("_").length - 1]
                          }}</text>
						</view>
						<view class="order-item" style="display: flex;width: 100%;justify-content: space-between;">
							<view style="display: flex;">
								<up-icon name="calendar" color="#4a4a4a"></up-icon>
								<text>下单日期：</text>
								<text class="myText">{{ item.orderDate }}</text>
							</view>
							<view style="display: flex;float: right;">
								<up-icon name="star" color="#4a4a4a"></up-icon>
								<text>部门：</text>
								<text class="myText">{{ item.department }}</text>
							</view>
						</view>
						<view class="order-item" style="display: flex;width: 100%;justify-content: space-between;">
							<view style="display: flex;">
								<up-icon name="map" color="#4a4a4a"></up-icon>
								<text>所在区域：</text>
								<text class="myText">{{ item.area }}</text>
							</view>
							<view style="display: flex;float: right;">
								<up-icon name="tags" color="#4a4a4a"></up-icon>
								<text>发货方式：</text>
								<text class="myText">{{ item.choiceCar }}</text>
							</view>
						</view>
						<view class="order-item" style="display: flex;width: 100%;justify-content: space-between;">
							<view style="display: flex;">
								<up-icon name="man-add" color="#4a4a4a"></up-icon>
								<text>销售人员：</text>
								<text class="myText">{{ item.salesPerson }}</text>
							</view>
							<view style="display: flex;float: right;">
								<up-icon name="phone" color="#4a4a4a"></up-icon>
								<text>客户电话：</text>
								<text class="myText">{{ item.customerPhone }}</text>
							</view>
						</view>
						<view class="order-item">
							<up-icon name="account" color="#4a4a4a"></up-icon>
							<text>客户名称：</text>
							<text class="myText">{{ item.customerName }}</text>

						</view>
						<view class="order-item">
							<up-icon name="shopping-cart" color="#4a4a4a"></up-icon>
							<text>产品：</text>
							<text class="myText">{{ item.productName }}</text>
						</view>
						<view class="order-item">
							<up-icon name="server-man" color="#4a4a4a"></up-icon>
							<text>跟单员：</text>
							<text class="myText">{{ item.gendanyuan }}</text>
						</view>
						<view class="order-item">
							<up-icon name="rmb-circle" color="#4a4a4a"></up-icon>
							<text>销售价：</text>
							<text class="myText">{{ item.priceTotal }}</text>
						</view>

						<view class="order-item">
							<up-icon name="bag" color="#4a4a4a"></up-icon>
							<text>总重量：</text>
							<text class="myText">{{ item.weightTotal }}</text>
						</view>
						<view class="order-bom">
							<view class="order-bom-left">
								<view><image src="@/static/icon/copy.png" class="iconStyle" @click="showCopy(item)"></image></view>
							</view>
							<view class="order-bom-right">
								<view class="box1" @click="cancel(item.id)" v-show="item.status == 1">取消</view>
								<view class="box2"
									@click="navTo('/pages/supplyChain/sellOrder/detail',item.id,item.status,1)">详情
								</view>
								<view class="box3" @click="edit(item.id)" v-show="item.status == 1">编辑</view>
								<view class="box4"
									@click="navTo('/pages/supplyChain/sellOrder/detail',item.id,item.status,2)"
									v-show="item.status != 1&&item.choiceCar=='客户自提'">物流</view>
								<view class="box5"
									@click="navTo('/pages/supplyChain/sellOrder/detail',item.id,item.status,3)"
									v-show="isHuandanOrBuDan(item)">换单</view>
								<view class="box8" @click="buDan(item.id)" v-show="isHuandanOrBuDan(item)">补单</view>
								<view class="box6"
									@click="navTo('/pages/supplyChain/sellOrder/detail',item.id,item.status,4)"
									v-show="isHuiKuan(item)">回款</view>
								<view class="box7"
									@click="navTo('/pages/supplyChain/sellOrder/detail',item.id,item.status,5)"
									v-show="isQianShou(item)">签收</view>
							</view>
						</view>

						<view v-if="item.childrenList" style="margin-bottom: 30rpx;">
							<u-divider text="其它子单" textColor="#a3a3a3" lineColor="#ff0000" dashed></u-divider>
							<view class="order-bom" v-for="(order,orderIndex) in item.childrenList"
								style="margin-bottom: 10rpx; padding:5rpx 0rpx 5rpx 0rpx;">
								{{ (order.parkName.split("_"))[order.parkName.split("_").length - 1]+'(1单)'}}
								<u-tag :text="getStatus(order.status)" type="error" size="mini" shape="circle"></u-tag>
								<view class="order-bom-right">
									<view class="box2"
										@click="navTo('/pages/supplyChain/sellOrder/detail',order.id,order.status,1)">详情
									</view>
								</view>
							</view>
						</view>
					</view>
				</up-list-item>
			</up-list>
		</view>
		<view>
		</view>
		<up-modal :show="popupShow" title="请输入取消理由" :showConfirmButton="false">
			<view style="width: 100%;">
				<up-textarea v-model="cancelValue" placeholder="请输入内容"></up-textarea>
				<view style="display: flex;">
					<u-button text="取消" type="error" shape="circle" plain @click="popupShow=false"></u-button>
					<u-button slot="confirmButton" text="确定" type="primary" shape="circle" plain
						@click="confirmCancel"></u-button>
				</view>
			</view>

		</up-modal>
		<u-modal :show="modalShow" :showConfirmButton="false">
			<view class="slot-content">
				<rich-text nodes="加载数据,请稍后..."></rich-text>
			</view>
		</u-modal>
		
        <!-- 复制 -->
		<copyView :item="item" v-if="copyShow" @closeCopy="closeCopy"></copyView>
		<!-- 		<up-notify message="没有更多了" :show="messageShow"></up-notify> -->
		<!-- <u-loading-page :loading="modalShow" color="#fcfcfc" :style="{ backgroundColor: 'rgba(53, 53, 53, 0.5)' }" loadingMode="spinner" loadingText="加载数据,请稍后"></u-loading-page> -->
	</view>
</template>

<script>
	import orderApi from '@/apis/gyl/order.js';
    import copyView from '@/components/order/copyOrderInfo.vue'
	export default {
		name: "yt-order-list",
		components:{
			copyView
		},
		data() {
			return {
				orderNum:'',
				lineBg: '',
				dataList: [],
				cancelId: null,
				pageNo: 1,
				pageSize: 8,
				status: 1,
				modalShow: false,
				messageShow: false,
				popupShow: false,
				cancelValue: '',
				titleList: [{
						name: '待分配',
						badge: {
							value: 0
						}
					}, {
						name: '待接单',
						badge: {
							value: 0
						}
					}, {
						name: '备货中',
						badge: {
							value: 0
						}
					}, {
						name: '待发货',
						badge: {
							value: 0
						}
					}, {
						name: '待回款|待签收',
						badge: {
							value: 0
						}
					},
					{
						name: '已完结',
						badge: {
							value: 0
						}
					}
				],
			    copyShow: false,
				item: null,
			};
		},
		onNavigationBarButtonTap() {
		    uni.navigateTo({
		    	url: '/pages/supplyChain/sellOrder/index'
		    });
	    },
		methods: {
			
			/**
			 * 展示复制页面
			 * @param {Object} item
			 */
			async showCopy(item){
				this.item = item;
				this.copyShow = true;
			},
			
			/**
			 * 关闭
			 */
			closeCopy(){
				this.copyShow = false;
			},
				
			/**
			 * 搜索
			 */
			search(){
				this.pageNo = 1;
				this.pageSize = 8;
				this.dataList = [];
				this.modalShow = true;
				this.list();
				this.getTotal();
			},
			
			/**
			 * type:1详情 2物流
			 * 路由跳转
			 * @param {Object} url
			 */
			navTo(url, id, status, type) {
				uni.navigateTo({
					url: url + "?id=" + id + "&status=" + status + "&type=" + type
				});
			},

			/**
			 * 触底调用
			 */
			scrolltolower() {
				this.modalShow = true;
				this.pageNo++;
				this.list();
				this.getTotal();
			},

			/**
			 * 切换tab
			 */
			tabsClick(item) {
				this.status = item.index + 1;
				this.pageNo = 1;
				this.pageSize = 8;
				this.dataList = [];
				this.modalShow = true;
				this.list();
				this.getTotal();
			},
			cancel(id) {
				this.cancelId = id;
				this.popupShow = true;
			},
			/**
			 * 获取状态
			 */
			getStatus(status) {
				const arr = [
					[1, '待分配'],
					[2, '待接单'],
					[3, '备货中'],
					[4, '待发货'],
					[6, '待回款/待签收'],
					[7, '已回款/待签收'],
					[8, '待回款/已签收'],
					[9, '已完结']
				];
				const map = new Map(arr);
				return map.get(status);
			},
			/**
			 * 是否换单
			 * @param {Object} item
			 */
			isHuandanOrBuDan(item) {
				var flag = false;
				if (item.status > 1 && item.status <= 5) {
					flag = true;
				}
				if (item.childrenList) {
					for (var i = 0; i < item.childrenList.length; i++) {
						const order = item.childrenList[i];
						if (order.status == 1 || order.status >= 5) {
							flag = false;
							break;
						}
					}
				}
				return flag;
			},
			/**
			 * 是否回款
			 * @param {Object} item
			 */
			isHuiKuan(item) {
				var flag = false;
				if (item.status == 6 || item.status == 8) {
					flag = true;
				}
				if (item.childrenList) {
					for (var i = 0; i < item.childrenList.length; i++) {
						const order = item.childrenList[i];
						if (item.status < 6) {
							flag = false;
							break;
						}
					}
				}
				return flag;
			},
			/**
			 * 是否签收
			 * @param {Object} item
			 */
			isQianShou(item) {
				var flag = false;
				if (item.status == 6 || item.status == 7) {
					flag = true;
				}
				if (item.childrenList) {
					for (var i = 0; i < item.childrenList.length; i++) {
						const order = item.childrenList[i];
						if (item.status < 6) {
							flag = false;
							break;
						}
					}
				}
				return flag;
			},
			// ------------------------------------------------------------------------------------------------ api ----------------------------------------------------------------------------------------

			/**
			 * 确认取消订单
			 */
			async confirmCancel() {
				const res = await orderApi.cancelOrder({
					reason: this.cancelValue,
					mainId: this.cancelId
				});
				this.popupShow = false;
				if (res.success) {
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: '取消订单成功'
					});
					this.modalShow = true;
					this.pageNo = 1;
					this.pageSize = 8;
					this.dataList = [];
					this.list();
					this.getTotal();
				}
			},

			/**
			 * 列表查询
			 */
			async list() {
				const res = await orderApi.list({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: this.status,
					orderNum: this.orderNum
				});
				if (res.success) {
					if (res.data.records.length == 0) {
						uni.showToast({
							icon: 'none',
							duration: 3000,
							title: '没有更多了'
						});
					} else {
						this.dataList.push(...res.data.records);
					}
				}
				this.modalShow = false;
			},

			/**
			 * 总数获取
			 */
			async getTotal() {
				const res = await orderApi.getTotal({orderNum: this.orderNum});
				if (res.success) {
					const dataArr = res.data;
					this.titleList[0].badge.value = dataArr[0].total;
					this.titleList[1].badge.value = dataArr[1].total;
					this.titleList[2].badge.value = dataArr[2].total;
					this.titleList[3].badge.value = dataArr[3].total;
					this.titleList[4].badge.value = Number(dataArr[4].total) + Number(dataArr[5].total) + Number(dataArr[6].total);
					this.titleList[5].badge.value = dataArr[7].total;
				}
			},
			async edit(id) {
				uni.navigateTo({
					url: '/pages/supplyChain/sellOrder/index?id=' + id
				});
			},
			async buDan(id) {
				uni.navigateTo({
					url: '/pages/supplyChain/sellOrder/buDan?id=' + id
				});
			},
		},
		onLoad() {
			// this.modalShow = true;
			// this.list();
			// this.getTotal();
		},
		onShow() {
			this.$nextTick(() => {
				this.pageNo = 1;
				this.pageSize = 8;
				this.dataList = [];
				this.modalShow = true;
				this.list();
				this.getTotal();
			})

		}
	}
</script>

<style lang="scss">
	.u-sticky {
		border-bottom: 1px solid #d7d9da;
		box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3);
		// margin-bottom: 25rpx;
	}

	.head {
		background-color: #f3f3f3;
	}

	::v-deep .myList {
		// padding-top: 10rpx;
		// height: 1000px !important;
		// background-color: red;
		// position: fixed;
		// .uni-scroll-view {
		// 	.uni-scroll-view {
		// 		// overflow: visible !important;
		// 		// height: 100%;
		// 	}
		// }

	}

	.green {
		color: green;
	}

	.red {
		color: red;
	}

	.blue {
		color: #4b5eeb;
	}

	.order {
		// width: 100%;
		// height: 200rpx;
		border-radius: 30rpx;
		background-color: #ffffff;
		padding: 15rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		// margin-bottom: 25rpx;
		margin: 10px 20rpx 25rpx 20rpx;
		position: relative;

		.order-number {
			width: 100%;
			color: #c73614;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f3f3f3;
			padding-bottom: 20rpx;
			height: 60rpx;

			.number-left {
				display: flex;
				align-items: center;
				font-weight: bold;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}

				text {
					font-size: 30rpx;
					letter-spacing: 3rpx;
				}

			}

			.number-right {
				font-size: 26rpx;
				font-weight: bold;
				letter-spacing: 3rpx;
				padding-right: 5rpx;
				box-sizing: border-box;
			}

		}

		.order-item {
			width: 100%;
			display: flex;
			align-items: center;
			height: 50rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 15rpx;
			}

			.u-icon {
				margin-right: 5rpx;
			}

			text {
				font-size: 24rpx;
				color: rgba(170, 170, 170, 0.8);
			}

			.myText {
				font-weight: bold;
				color: rgba(2, 2, 2, 0.8);
			}
		}

		.order-bom {
			width: 100%;
			height: 60rpx;
			background-color: #f9f9f9;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order-bom-left {
				color: rgba(0, 0, 0, 0.5);
				font-size: 24rpx;
				padding-left: 10rpx;
				box-sizing: border-box;
			}

			.order-bom-right {
				// width: 200rpx;
				height: 100%;
				display: flex;
				color: #ffffff;
				font-size: 26rpx;

				.box1 {
					height: 100%;
					line-height: 60rpx;
					background-color: #e5a84a;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box2 {
					height: 100%;
					line-height: 60rpx;
					background-color: #56caa3;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box3 {
					height: 100%;
					line-height: 60rpx;
					background-color: #526afc;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					// margin-right: 10rpx;
				}

				.box4 {
					height: 100%;
					line-height: 60rpx;
					background-color: #aa55ff;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box5 {
					height: 100%;
					line-height: 60rpx;
					background-color: #aa557f;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box6 {
					height: 100%;
					line-height: 60rpx;
					background-color: #aaaa00;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box7 {
					height: 100%;
					line-height: 60rpx;
					background-color: #00a1ec;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.box8 {
					height: 100%;
					line-height: 60rpx;
					background-color: #b90000;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}
			}
		}
	}


	// .badge-container {
	// 	position: relative;
	// }

	// .badge-container::after {
	// 	content: '待分配';
	// 	position: absolute;
	// 	top: -10rpx;
	// 	right: 0rpx;
	// 	background-color: #6d6d6d;
	// 	color: white;
	// 	border-radius: 0% 0% 30% 30%;
	// 	width: 100rpx;
	// 	height: 50rpx;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: center;
	// 	font-size: 12px;
	// }

	.badge {
		position: absolute;
		top: -10rpx;
		right: 0rpx;
		background-color: green;
		color: white;
		border-radius: 0% 0% 30% 30%;
		width: 160rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
	}

	::v-deep .u-textarea__field {
		border: 1px solid #d8d2d0 !important;
	}
	
	.iconStyle {
		width: 45rpx;
		height: 45rpx;
	}
</style>